<!-- 模板 -->
<template>
	<div class="app">
        <transition :name="transitionName">
            <router-view></router-view>
        </transition>

        <pop-city :is-show="isShowCity" @on-cb="closeCityCb" :list="list"></pop-city> 
        
        <rule :is-show="isShowRule" @on-cb="closeRuleCb" :time='currentTime'></rule>

        <pop-signup :is-show="isShowSignup" @on-cb="closeSignSuccessCb"></pop-signup>

        <qr :is-show="isShowQR" @on-cb="closeQRCb" :url='url'></qr>
        
        <atbi :is-show="isShowAtBi" @on-cb="closeAtBiCb"></atbi>

        <phone-bind :is-show="isShowBind" @on-cb="closeBindCb"></phone-bind>

        <no-hurry :is-show="isShowNoHurry" @on-cb="closeNoHurryCb"></no-hurry>

        <sign-share-y  :is-show="isShowSignShareY" @on-cb="closeSignShareYCb"></sign-share-y> 

        <sign-share-n  :is-show="isShowSignShareN" @on-cb="closeSignShareNCb"></sign-share-n>  

        <share-winner :is-show="isShowShareWinner" @on-cb="closeShareWinnerCb"></share-winner>
        
        <quan :is-show="isShowQuan" @on-cb="closeQuanCb"></quan>

    </div>
</template>


<!-- js文件 -->
<script>
    import qrImg from './data/qr.js';
    import weixin from './data/data.js';
    import popCity from './views/popups/city.vue';
    import popSignup from './views/popups/signup.vue';
    import qr from './views/popups/qr.vue';
    import rule from './views/popups/rule.vue';
    import atbi from './views/popups/prizeatbi.vue';
    import quan from './views/popups/prize208.vue';
    import phoneBind from './views/popups/bind.vue';
    import noHurry from './views/popups/nohurry.vue';
    import signShareY from './views/popups/shareSignAttentionYes.vue';
    import signShareN from './views/popups/shareSignAttentionNo.vue';
    import shareWinner from './views/popups/shareSuccess.vue';


    export default {
        data () {
            return {
                transitionName: 'slide',
                url: ''
            }
        },
        watch: {
            '$route' (to, from) {
                this.transitionName = this.$store.state.moduleTransitionName;
            }
        },
        mixins: [weixin],
        components: {
            popCity,
            popSignup,
            qr,
            rule,
            atbi,
            quan,
            phoneBind,
            noHurry,
            signShareY,
            signShareN,
            shareWinner
        },
        computed: {
            // 显示城市
            isShowCity(){
                return this.$store.state.isShowCity;
            },
            // 显示规则
            isShowRule(){
                return this.$store.state.isShowRule;
            },
            // 当前选中的城市的活动时间，用于在规则中显示
            currentTime(){
                return this.$store.state.currentCityInfo.startTime
            },
            // 显示报名成功
            isShowSignup(){
                return this.$store.state.isSignSuccess;
            },
            // 显示二维码
            isShowQR(){
                return this.$store.state.isShowQR;
            },
            // 显示凹凸币
            isShowAtBi(){
                return this.$store.state.isShowAtbi;
            },
            // 显示输入手机号弹框
            isShowBind(){
                return this.$store.state.isShowBind;
            },
            // 显示客观别急
            isShowNoHurry(){
                return this.$store.state.isShowNoHurry;
            },
            // 报名成功 但已关注分享浮层
            isShowSignShareY(){
                return this.$store.state.isShowSignShareAttentionYes;
            },
            // 报名成功 但是未关注分享浮层
            isShowSignShareN(){
                return this.$store.state.isShowSignShareAttentionNo;
            },
            // 成功分享
            isShowShareWinner(){
                return this.$store.state.isShowShareWinner;
            },
            // 城市列表
            list(){
                return this.$store.getters.cityList;
            },
            // 显示优惠券
            isShowQuan(){
                return this.$store.state.isShowQuan;
            }
        },
        methods: {
            closeCityCb(){
                this.$store.commit('changeCity', false);
            },
            closeRuleCb(){
                this.$store.commit('showRulePop', false);
            },
            closeSignSuccessCb(){
                this.$store.commit('showSignSuccessPop', false);
            },
            closeQRCb(){
                this.$store.commit('showQRPop', false);
            },
            closeAtBiCb(){
                this.$store.commit('showAtbiPop', false);
            },
            closeQuanCb(){
                this.$store.commit('showQuanPop', false);
            },
            closeNoHurryCb(){
                this.$store.commit('showNoHurryPop', false);
            },
            closeSignShareYCb(){
                this.$store.commit('showShareSignAttentionYPop', false);
            },
            closeSignShareNCb(){
                this.$store.commit('showShareSignAttentionNPop', false);
            },
            closeShareWinnerCb(){
                this.$store.commit('showShareWinnerPop', false);
            },
            closeBindCb(){
                this.$store.commit('showBind', false);
            }
        },
        created(){
            this.$aui.loading.show({
                type: 1
            });
        },
        mounted(){
            this.url = qrImg[this.$store.state.userSubscribeInfo.channel];
        }
    }
</script>


<!-- scss -->
<style scoped lang="scss">
    @import './styles/common/config.scss';
    // 左右切换
    .slide-left-enter-active, 
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active{
        transition: all 0.6s cubic-bezier(0.86, 0, 0.07, 1);
    }
    .slide-right-enter, .slide-left-leave-active {
        transform: translateX(-100%);
        opacity: 0;
        position: absolute;
    }
    .slide-right-leave-active, .slide-left-enter {
        transform: translateX(100%);
        opacity: 0;
        position: absolute;
    }

    
    // 淡入淡出  用于首页
    .fade-enter-active, 
    .fade-leave-active{
        transition: all 0.8s cubic-bezier(0.06, 0, 0.07, 1);
    }
    .fade-enter, 
    .fade-leave-active{
        opacity: 0;
        position: absolute;
    }
</style>